<template>
  <div id="IndexWS">
    <div class="head-icon"></div>
    <div class="w1300 jrjlb-home">
      <div class="top">
        <el-input v-model="yaer" placeholder="请输入内容" style="margin: 0 30px;"></el-input>
        <el-button type="success" @click="calendar(yaer)">立即查看</el-button>
      </div>
    </div>
    <div class="w1300 jrjlb-home bian">
      <div v-html="vhtml"></div>
    </div>
    <el-divider></el-divider>
    <div class="w1300">
      <h2>element ui —— Calendar 日历 &ensp; 当前选中：<span style="color: red">{{input}}</span></h2>
      <el-calendar v-model="value"></el-calendar>
      <div style="margin:30px 0;"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IndexWS',
  data () {
    return {
      yaer: '',
      vhtml:'',
      value:new Date(),
      input: '',
    }
  },
  watch:{ 
    value(newVal,oldVal){
      console.log(newVal);
      this.input = this.value.getFullYear()+'-'+this.value.getMonth()+'-'+this.value.getDate()
    }
  },
  mounted() {
    this.yaer = 2021
    this.calendar(this.yaer);
    document.documentElement.scrollTop = 0;
  },
  methods: {
    calendar(y) {
      if (!y) {
        this.$message('这是一条消息提示');
        return
      }
      var w = new Date(y, 0).getDay();
      var html = '<div class="box" style="display: flex !important;">';
      for (let m = 1; m <= 12; ++m) {
        html += '<table style= "margin: 0 29px;">';
        html += '<tr class="title"><th colspan="7">' + y + ' 年 ' + m + ' 月</th></tr>';
        html += '<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>';
        var max = new Date(y, m, 0).getDate();
        
        html += '<tr>';                       
        for (let d = 1; d <= max; ++d) {
            if (w && d == 1) {               
              html += '<td colspan="' + w + '"> </td>';
            }
            html += '<td>' + d + '</td>';
            if (w == 6 && d != max) {           
                html += '</tr><tr>';
            } else if (d == max) {
                html += '</tr>';
            }
            w = (w + 1 > 6) ? 0 : w + 1;
        }
        if (m === 6) {
          html += '</table></div><div class="box" style="display: flex !important;margin: 50px auto;">';
        }else {
          html += '</table>';
        }
      }
      html += '</div>';
      
      this.vhtml = html
      console.log(this.vhtml,'5555555555555555');
    }
  }
}
</script>
<style scoped="scoped">
.bian{
  background-image: linear-gradient(to right, #bbccaa,#aabbcc, #ccbbaa);
  background-size: 1300px 500px;
  background-repeat:no-repeat;
  border: 1px solid #aabbcc;
  border-radius: 1%;
}
.top{
  width: 300px !important;
  display: flex;
  justify-content: center;
  align-content: center;
}
.box table{
  margin: 0 30px;
}

  #IndexWS{
    background: #F6F6F6;
    padding-bottom: 150px;
  }
  .w1300{
    width: 1300px;
    margin: 0 auto;
  }
  .jrjlb-home{
    padding: 40px 0 24px 0;
  }
  
</style>
